<!-- 首页-全系统IT路径图 -->
<template>
	<div id="container" class="style-split-all-it-road">
		<div>
			<sticky :class-name="'sticky-background'">
				<!-- 搜索条件 -->
				<el-row class="search-box" style="text-align: right">
					<el-col :span="24">
						<el-form id="searchFormId" :inline="true" size="small">
							<el-form-item>
								<!-- 刷新倒计时 -->
								<div style="display: flex; align-items: center; color: #ffffff">
									<i class="el-icon-refresh" style="font-size: 16px"></i>
									<span style="font-size: 16px; margin-left: 6px">刷新:</span>
									<span style="font-size: 16px; color: #02f9fb; margin-right: 6px">{{ config.refreshTimeText }}秒</span>
									<el-icon style="padding-bottom: 3px" :size="20" @click="selectRefreshTime"><CaretBottom /></el-icon>

									<div v-show="config.isSelectRefreshTime" class="popup-refreshTime">
										<ul>
											<li v-for="(item, index) in config.refreshTimeOptions" :key="index" @click="changeRefreshTime(item.value)">{{ item.label }}</li>
										</ul>
									</div>
								</div>
							</el-form-item>
							<el-form-item>
								<el-date-picker
									v-model="searchForm.dateTime"
									:clearable="false"
									:editable="false"
									:picker-options="config.datePickerOptions"
									type="date"
									value-format="YYYY-MM-DD"
									placeholder="选择日期"
								></el-date-picker>
							</el-form-item>
							<el-form-item>
								<!-- 查询 -->
								<el-tooltip class="item" effect="dark" content="查询" placement="bottom">
									<el-button icon="el-icon-search" @click="search">
										<el-icon style="vertical-align: middle">
											<Search />
										</el-icon>
									</el-button>
								</el-tooltip>
								<!-- 立即刷新 -->
								<!--<el-button icon="el-icon-refresh"></el-button>-->
								<!-- 编辑IT路径图 -->
								<el-tooltip class="item" effect="dark" :content="config.iconEditTooltipText" placement="bottom">
									<el-button icon="el-icon-edit-outline" :class="{ iconActive: config.isIconEditActive }" @click="toggleEditMode">
										<el-icon><Edit /></el-icon>
									</el-button>
								</el-tooltip>
								<!-- 鹰眼 -->
								<el-tooltip class="item" effect="dark" :content="config.iconShowMinimapText" placement="bottom">
									<el-button icon="el-icon-view" :class="{ iconActive: config.isIconShowMinimapActive }" @click="toggleShowMinimap">
										<el-icon><View /></el-icon>
									</el-button>
								</el-tooltip>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
				<!-- 监控概况 -->
				<el-row type="flex" justify="center" :gutter="20">
					<el-col :span="4">
						<div class="monitor-overview-card card-animate-first">
							<el-row>
								<el-col :span="24" class="monitor-overview-title">业务系统</el-col>
							</el-row>
							<el-row>
								<el-col :span="10">不健康</el-col>
								<el-col :span="10" class="monitor-overview-unhealth-text">
									<count-to :start-val="0" :end-val="monitorOverview.systemUnhealthTotal" :duration="2000" />
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="10">总数</el-col>
								<el-col :span="10" class="monitor-overview-total-text">
									<count-to :start-val="0" :end-val="monitorOverview.systemTotal" :duration="2000" />
								</el-col>
							</el-row>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="monitor-overview-card card-animate-second">
							<el-row>
								<el-col :span="24" class="monitor-overview-title">应用组件</el-col>
							</el-row>
							<el-row>
								<el-col :span="10">不健康</el-col>
								<el-col :span="10" class="monitor-overview-unhealth-text">
									<count-to :start-val="0" :end-val="monitorOverview.segmentUnhealthTotal" :duration="2000" />
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="10">总数</el-col>
								<el-col :span="10" class="monitor-overview-total-text">
									<count-to :start-val="0" :end-val="monitorOverview.segmentTotal" :duration="2000" />
								</el-col>
							</el-row>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="monitor-overview-card card-animate-third">
							<el-row>
								<el-col :span="24" class="monitor-overview-title">业务</el-col>
							</el-row>
							<el-row>
								<el-col :span="10">不健康</el-col>
								<el-col :span="10" class="monitor-overview-unhealth-text">
									<count-to :start-val="0" :end-val="monitorOverview.businessUnhealthTotal" :duration="2000" />
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="10">总数</el-col>
								<el-col :span="10" class="monitor-overview-total-text">
									<count-to :start-val="0" :end-val="monitorOverview.businessTotal" :duration="2000" />
								</el-col>
							</el-row>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="monitor-overview-card card-animate-fourth">
							<el-row>
								<el-col :span="24" class="monitor-overview-title">业务访问量</el-col>
							</el-row>
							<el-row>
								<el-col :span="10">不健康</el-col>
								<el-col :span="10" class="monitor-overview-unhealth-text">
									<count-to :start-val="0" :end-val="monitorOverview.businessVisitUnhealthTotal" :duration="2000" />
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="10">总数</el-col>
								<el-col :span="10" class="monitor-overview-total-text">
									<count-to :start-val="0" :end-val="monitorOverview.businessVisitTotal" :duration="2000" />
								</el-col>
							</el-row>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="monitor-overview-card card-animate-fifth">
							<el-row>
								<el-col :span="24" class="monitor-overview-title">用户数</el-col>
							</el-row>
							<el-row type="flex" align="middle" class="monitor-overview-user-text">
								<el-col :span="22">
									<count-to :start-val="0" :end-val="monitorOverview.userTotal" :duration="2000" />
								</el-col>
							</el-row>
						</div>
					</el-col>
				</el-row>
			</sticky>
		</div>

		<!-- 全系统IT路径图 -->
		<el-row v-loading="itRoadLoading" class="road-container">
			<el-col :span="24">
				<yd-it-road
					ref="ydItRoadRef"
					:config="{ type: 'AllItRoad', canvasHeight: 3000, noDataFlag: false }"
					@dragNode="updateSegmentPos"
					@afterRender="resizeITRoad"
					@clickNode="onClickNode"
				></yd-it-road>
			</el-col>
		</el-row>
		<!-- 点击节点弹窗 -->
		<el-dialog v-model="dialogShow" width="1600px" height="600px" :show-close="false">
			<!-- 搜索条件 -->
			<yd-form
				style="margin-bottom: 20px"
				:model="formData"
				:options="formOptions"
				:config="{ labelWidth: '100px' }"
				@form-init="formInit"
				@change="dialogFormChange"
			>
				<template #form-btn>
					<el-date-picker
						v-model="formData.dateTime"
						:clearable="false"
						:editable="false"
						:picker-options="config.datePickerOptions"
						type="date"
						value-format="YYYY-MM-DD"
						placeholder="选择日期"
						style="margin: 0 20px 0 12px"
					></el-date-picker>
					<el-button type="primary" @click="searchHandler">查询</el-button>
				</template>
			</yd-form>
			<!-- 组件详情 -->
			<yd-card style="margin-bottom: 10px">
				<div class="yd-card-header yd-flex">
					<div class="yd-flex1">
						<div class="yd-circle"></div>
						<span class="yd-card-title">组件详情</span>
					</div>
				</div>
				<YdTable
					:formData="formData"
					:tableConfig="componentConfig"
					:tableData="componentData.data"
					@sizeChangeHandler="queryComponentDetail"
					@currentChangeHandler="queryComponentDetail"
					@sortChangeHandler="queryComponentDetail"
				></YdTable>
			</yd-card>
			<!-- 网络详情  -->
			<yd-card style="margin-bottom: 10px">
				<div class="yd-card-header yd-flex">
					<div class="yd-flex1">
						<div class="yd-circle"></div>
						<span class="yd-card-title">网络详情</span>
					</div>
				</div>
				<YdTable
					:formData="formData"
					:tableConfig="networkDetailConfig"
					:tableData="networkDetailData.data"
					@sizeChangeHandler="queryNetworkDetail"
					@currentChangeHandler="queryNetworkDetail"
					@sortChangeHandler="queryNetworkDetail"
				></YdTable>
			</yd-card>
			<!-- 网元详情  -->
			<yd-card style="margin-bottom: 10px">
				<div class="yd-card-header yd-flex">
					<div class="yd-flex1">
						<div class="yd-circle"></div>
						<span class="yd-card-title">网元详情</span>
					</div>
				</div>
				<YdTable
					:formData="formData"
					:tableConfig="networkMetaDataDetailConfig"
					:tableData="networkMetaDataDetailData.data"
					@sizeChangeHandler="queryNetworkMetaDataDetail"
					@currentChangeHandler="queryNetworkMetaDataDetail"
					@sortChangeHandler="queryNetworkMetaDataDetail"
				></YdTable>
			</yd-card>
		</el-dialog>
	</div>
</template>

<script setup name="allItRoad" lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { Search, View, Edit, CaretBottom } from '@element-plus/icons-vue';

import { parseTime, toDecimalFormate, formatBytes } from '@/utils/common';
import { CountTo } from 'vue3-count-to';
import YdItRoad from '@/components/YdItRoad/index.vue';
import Sticky from '@/components/Sticky/index.vue';
import { getConfigKey } from '@/api/management/systemManage/systemConfig';
import { queryMonitorOverview, queryAllItRoad, querySegmentData, updateSegmentPosition, queryNetworkDetailList } from '@/api/bpm/home/all_it_road';
import { queryNetworkMetaDataDetailList } from '@/api/bpm/network-detail/index';
import { queryComponentDetailList } from '@/api/bpm/network-detail/index';
import { queryTableSaveCycleInfoByName } from '@/api/bpm/home/index';
import { GraphData } from '@/components/YdItRoad/itRoad-type';

const instance = getCurrentInstance();
const proxy = instance?.proxy;

const router = useRouter();

let ydItRoadRef = ref<InstanceType<typeof YdItRoad>>();

let dialogShow = ref(false);
// 配置
let config: anyObj = reactive({
	// 刷新时间下拉选
	refreshTimeOptions: [
		{
			value: 60,
			label: '1分钟',
		},
		{
			value: 300,
			label: '5分钟',
		},
		{
			value: 1800,
			label: '30分钟',
		},
		{
			value: 3600,
			label: '60分钟',
		},
	],
	// 当前画布模式
	currentMode: 'default',
	// 刷新时间倒计时文本
	refreshTimeText: undefined,
	// 刷新时间定时器
	refreshTimeInterval: null,
	// 日期控件配置项
	datePickerOptions: {
		// 禁选日期
		disabledDate(time: any) {
			return time.getTime() > Date.now();
		},
	},
	// 编辑模式启动按钮样式开关
	isIconEditActive: false,
	// 编辑按钮提示文本
	iconEditTooltipText: '编辑模式：关闭',
	// 鹰眼按钮样式开关
	isIconShowMinimapActive: false,
	// 鹰眼开关提示文本
	iconShowMinimapText: '鹰眼：开启',
	// 刷新时间下拉选开关
	isSelectRefreshTime: false,
});
// 搜索表单
let searchForm = reactive({
	refreshTime: 300,
	dateTime: parseTime(new Date(), '{y}-{m}-{d}'),
});
// 监控概况数据
let monitorOverview = ref({
	businessTotal: 0,
	businessUnhealthTotal: 0,
	businessVisitTotal: 0,
	businessVisitUnhealthTotal: 0,
	segmentTotal: 0,
	segmentUnhealthTotal: 0,
	systemTotal: 0,
	systemUnhealthTotal: 0,
	userTotal: 0,
});
// 加载层
let itRoadLoading = ref(false);

// 搜索表单数据
let formData = reactive<FormModelType>({});
// 表单配置

const formOptions = ref<FormOptionType>([
	{
		type: 'select',
		prop: 'cloudPlatformId',
		label: '云平台',
		placeholder: '请选择云平台',
		api: {
			name: 'queryDictByType',
			params: 'cloud_platform',
		},
	},
	{
		type: 'select',
		prop: 'systemId',
		label: '业务系统',
		placeholder: '请选择业务系统',
		api: {
			name: 'queryAppSystemOptions',
			params: { isStatus: 1 },
		},
		attrs: {
			clearable: false,
		},
	},
	{
		type: 'select',
		prop: 'segmentId',
		label: '网端名称',
		placeholder: '请选择网端',
		api: {
			name: 'querySegmentOptions',
		},
		cascaderParam: {
			data: formData,
			key: 'systemId',
		},
	},
]);

/**
 * 以下是弹窗数据
 */

// 组件详情表格配置
let componentConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '组件IP端口',
			prop: 'componentIp',
		},
		{
			label: '请求量',
			prop: 'reqCount',
			sortable: true,
		},
		{
			label: '平均响应时长',
			prop: 'avgResponseTime',
			sortable: true,
			formatter(row: any, val: any) {
				return toDecimalFormate(val, 'wm');
			},
		},
		{
			label: '平均处理耗时',
			prop: 'avgDealTime',
			sortable: true,
			formatter(row: any, val: any) {
				return toDecimalFormate(val, 'wm');
			},
		},
		{
			label: '平均传输耗时',
			prop: 'avgTranslateTime',
			sortable: true,
			formatter(row: any, val: any) {
				return toDecimalFormate(val, 'wm');
			},
		},
		{
			label: '告警请求量',
			prop: 'alarmReqCount',
			sortable: true,
			operation: [
				{
					rowKey: 'alarmReqCount',
					color: '#ff9a0c',
					handler: (scope) => {
						jumpToBaseAlarm(scope.row, undefined);
					},
				},
			],
		},
		{
			label: '失败请求量',
			prop: 'failReqCount',
			sortable: true,
			operation: [
				{
					rowKey: 'failReqCount',
					color: '#fe5578',
					handler: (scope) => {
						jumpToBaseAlarm(scope.row, [0]);
					},
				},
			],
		},
		{
			label: '成功率',
			prop: 'successRate',
			sortable: true,
			formatter(row, val) {
				return val + '%';
			},
		},
		{
			label: '健康度',
			prop: 'healthRate',
			sortable: true,
			formatter(row, val) {
				return val + '%';
			},
		},
	],
	loading: false,
	disableOrderNumber: true,
	pagination: {
		pageNum: 1,
	},
});
// 组件详情表格数据
let componentData = reactive({
	data: [],
});

// 网络详情表格配置
let networkDetailConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '字节数(总数/发送/接收)',
			prop: 'serverAvgResponseTime',
			sortable: true,
			formatter(row: any) {
				return row.totalBytes + '/' + row.totalResponseBytes + '/' + row.totalRequestBytes;
			},
		},
		{
			label: '总包数',
			prop: 'totalPackets',
			sortable: true,
		},
		{
			label: '响应数',
			prop: 'totalResponseNums',
			sortable: true,
		},
		{
			label: '响应耗时',
			prop: 'avgServerResponseTime',
			sortable: true,
			formatter(row: any, value) {
				return toDecimalFormate(value, 'wm');
			},
		},
		{
			label: '会话数',
			prop: 'totalNewSessionsNums',
			sortable: true,
		},
		{
			label: '连接失败会话数',
			prop: 'totalConnectFail',
			sortable: true,
		},
		{
			label: '建连耗时',
			prop: 'avgConnectTime',
			sortable: true,
			formatter(row: any, val: any) {
				return toDecimalFormate(val, 'wm');
			},
		},
		{
			label: '网络传输耗时',
			prop: 'avgNetworkTime',
			sortable: true,
			formatter(row: any, val: any) {
				return toDecimalFormate(val, 'wm');
			},
		},
		{
			label: '零窗口数',
			prop: 'totalWindowEvents',
			sortable: true,
		},
		{
			label: '重置包数',
			prop: 'totalResetPackets',
			sortable: true,
		},
		{
			label: '重传包数',
			prop: 'totalRetryPackets',
			sortable: true,
		},
		{
			label: 'SSL告警会话数',
			prop: 'totalSslAlertCount',
			sortable: true,
		},
		{
			label: '告警会话数',
			prop: 'totalAlarmCount',
			sortable: true,
		},
		{
			label: '健康度',
			prop: 'healthRate',
			sortable: true,
			formatter(row, val) {
				return val + '%';
			},
		},
	],
	loading: false,
	disableOrderNumber: true,
	pagination: {
		pageNum: 1,
	},
});
// 表格数据
let networkDetailData = reactive({
	data: [],
});

// 网元详情表格配置
let networkMetaDataDetailConfig = reactive<TableConfigType>({
	columns: [
		{
			label: 'CPU使用率',
			prop: 'cpuRate',
			sortable: true,
			formatter(row: any, value: any) {
				return value + '%';
			},
		},
		{
			label: '内存使用率',
			prop: 'memoryRate',
			sortable: true,
			formatter(row: any, value: any) {
				return value + '%';
			},
		},
		{
			label: '磁盘IO',
			prop: 'diskRate',
			sortable: true,
			formatter(row: any, value: any) {
				return value + '%';
			},
		},
		{
			label: '系统负载',
			prop: 'sysWork',
			sortable: true,
			formatter(row: any, value: any) {
				return value + '秒';
			},
		},
		{
			label: '磁盘smart',
			prop: 'diskSmart',
			sortable: true,
			formatter(row: any, value: any) {
				return value + '秒';
			},
		},
		{
			label: '网卡流量',
			prop: 'networkFlow',
			sortable: true,
			formatter(row: any, value: any) {
				return formatBytes(value);
			},
		},
	],
	loading: false,
	disableOrderNumber: true,
	pagination: {
		pageNum: 1,
	},
});
// 网元详情表格数据
let networkMetaDataDetailData = reactive({
	data: [],
});

// 网元数据历史峰值
const networkMetaDataPeek = ref();

onMounted(() => {
	// 渲染布局
	renderLayout();
	Promise.all([
		// 初始化刷新时间
		initRefreshTime(),
		// 初始化周期表信息
		initCycleTableInfo(),
	]).then(() => {
		// 渲染监控概况
		renderMonitorOverview();
		// 渲染IT路径图
		renderItRoad();
	});
});
onBeforeUnmount(() => {
	// 保证定时器被销毁
	clearInterval(config.refreshTimeInterval);
});
// 初始化刷新时间
function initRefreshTime() {
	return new Promise((resolve) => {
		getConfigKey('home.allItRoad.refreshTime').then((res) => {
			searchForm.refreshTime = parseInt(res.data);
			resolve('init refreshTime success!');
		});
	});
}
// 初始化周期表信息，如果存在周期表信息，更新禁选日期范围
function initCycleTableInfo() {
	return new Promise((resolve) => {
		queryTableSaveCycleInfoByName('busi_sys_segment_trend_m').then((res) => {
			if (res.data) {
				let saveDay = parseInt(res.data.saveDay);
				if (isNaN(saveDay)) {
					return;
				}
				// 更新禁选日期范围
				config.datePickerOptions = {
					disabledDate(time: any) {
						let t = time.getTime(),
							currentTime = Date.now();
						let minTime = currentTime - saveDay * 24 * 60 * 60 * 1000;
						return t < minTime || t > currentTime;
					},
				};
			}
			resolve('init initCycleTableInfo success!');
		});
	});
}
// 渲染布局
function renderLayout() {
	let containerHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 82;
	(document.getElementById('container') as HTMLDivElement).style.height = containerHeight + 'px';
}
// 切换显示/隐藏缩略图
function toggleShowMinimap() {
	if (config.isIconShowMinimapActive) {
		config.isIconShowMinimapActive = false;
		config.iconShowMinimapText = '鹰眼：关闭';
	} else {
		config.isIconShowMinimapActive = true;
		config.iconShowMinimapText = '鹰眼：开启';
	}
	ydItRoadRef.value!.toggleShowMinimap();
}
// 切换默认/编辑模式
function toggleEditMode() {
	if (config.currentMode === 'edit') {
		config.currentMode = 'default';
		config.isIconEditActive = false;
		config.iconEditTooltipText = '编辑模式：关闭';
	} else {
		config.currentMode = 'edit';
		config.isIconEditActive = true;
		config.iconEditTooltipText = '编辑模式：开启';
	}
	ydItRoadRef.value!.setGraphMode(config.currentMode);
}
// 选择刷新时间
function selectRefreshTime() {
	config.isSelectRefreshTime = !config.isSelectRefreshTime;
}
// 改变刷新时间
function changeRefreshTime(val: any) {
	// 清除刷新时间定时器
	clearInterval(config.refreshTimeInterval);
	// 设置新的刷新时间
	searchForm.refreshTime = val;
	config.isSelectRefreshTime = false;
	// 启动刷新时间定时器
	startRefreshTimeInterval();
}
// 搜索
function search() {
	// 清除刷新时间定时器
	clearInterval(config.refreshTimeInterval);
	// 渲染监控概况
	renderMonitorOverview();
	// 渲染网端详情数据
	renderSegmentDetail();
}
// 渲染监控概况
function renderMonitorOverview() {
	queryMonitorOverview({
		dateTime: searchForm.dateTime,
	}).then((res) => {
		if (res.code !== 0) {
			// 接口报错
			proxy?.$message.warning(res.data.msg);
			return;
		}
		monitorOverview.value = res.data;
	});
}
// 渲染IT路径图
function renderItRoad() {
	itRoadLoading.value = true;
	queryAllItRoad().then((res: ApiResponse) => {
		itRoadLoading.value = false;
		if (res.code !== 0) {
			return;
		}

		// 默认采用算法布局，并触发保存网端位置
		let d: GraphData = {
			nodes: [],
			edges: [],
		};

		let calcuHeight = 300;
		console.log('dasta--222', res.data);
		let isSavePos = true;

		formatGraphData(res.data);
		function formatGraphData(arr: any[]) {
			if (arr instanceof Array === false) {
				console.error('arr不是数组---------');
				return;
			}
			arr.forEach((node: any) => {
				node.id = node.id + '';
				if (node.locationX) {
					// 采用自定义布局
					isSavePos = false;
					ydItRoadRef.value?.setLayout({
						type: 'allItRoadLayout',
					});
				}

				let index = d.nodes.findIndex((n) => n.id === node.id);
				if (index === -1) {
					// 没有的节点才加进去
					d.nodes.push({
						id: node.systemId + '_' + node.id,
						name: node.name,
						segmentId: node.id,
						systemId: node.systemId,
						x: node.locationX,
						y: node.locationY,
						text: {
							reqCount: '0',
							avgDealTime: '-',
							health: '-',
						},
						// 默认无数据状态
						status: '1',
					});
				}
				if (node.childNodes instanceof Array) {
					node.childNodes.forEach((subNode: any) => {
						d.edges.push({
							source: node.systemId + '_' + node.id,
							target: subNode.systemId + '_' + subNode.id,
						});
					});
					formatGraphData(node.childNodes);
				}
			});
		}
		console.log('d', d);

		// 重新设置画布宽高
		ydItRoadRef.value?.graph.getWidth();
		ydItRoadRef.value?.graph.changeSize(ydItRoadRef.value.graph.getWidth(), calcuHeight);
		// 加载IT路径图
		ydItRoadRef.value?.loadItRoadData(d);
		// 平移图形到原点
		// ydItRoadRef.value?.graph.moveTo(0, 0);
		// 判断是否保存网端位置
		if (isSavePos) {
			setTimeout(() => {
				let nodes = ydItRoadRef.value?.getAllNodes();
				nodes.forEach((node: any) => {
					let model = node.getModel();
					updateSegmentPos(null, {
						segmentId: model.segmentId,
						locationX: model.x,
						locationY: model.y,
					});
				});
			}, 3000);
		}
		// 在渲染IT路径图后首次渲染网端详情数据
		renderSegmentDetail();
	});
}
// 渲染网端详情数据
function renderSegmentDetail() {
	itRoadLoading.value = true;
	querySegmentData({
		dateTime: searchForm.dateTime,
	}).then((res) => {
		itRoadLoading.value = false;
		if (res.code !== 0) {
			proxy?.$message.warning(res.data.msg);
			return;
		}
		ydItRoadRef.value?.updateInfo(res.data);
		/*
		 * 网端详情数据渲染完成后启动刷新时间定时器
		 */
		startRefreshTimeInterval();
	});
}
// 启动刷新时间定时器
function startRefreshTimeInterval() {
	config.refreshTimeText = searchForm.refreshTime;
	config.refreshTimeInterval = setInterval(function () {
		config.refreshTimeText -= 1;
		if (config.refreshTimeText <= 0) {
			// 定时器结束，清除定时器
			clearInterval(config.refreshTimeInterval);
			// 刷新监控概况
			renderMonitorOverview();
			// 刷新网端详情数据
			renderSegmentDetail();
		}
	}, 1000);
}
// 更新网端位置
function updateSegmentPos(ev: any, model: any) {
	// 编辑模式启动情况下或指定model不为空才更新网端位置
	if (config.isIconEditActive || model) {
		let segmentPos = model || {
			segmentId: ev.item.getModel().segmentId,
			locationX: ev.item.getModel().x,
			locationY: ev.item.getModel().y,
		};
		if (segmentPos.locationX) {
			updateSegmentPosition(segmentPos).then(() => {
				// console.log(res);
			});
		}
	}
}

// 路径图渲染完成后获取canvas大小,高度较小时调整canvas
function resizeITRoad() {
	let graph = ydItRoadRef.value?.graph;
	let canvasHeight = graph.getHeight();
	let canvasWidth = graph.getWidth();
	let viewHeight = document.body.clientHeight - 278;
	if (canvasHeight < viewHeight) {
		graph.changeSize(canvasWidth, viewHeight);
	}
}
// 点击节点
function onClickNode(e: anyObj) {
	console.log('clicknode', e);
	dialogShow.value = true;
	nextTick(() => {
		let segmentId = e.item['_cfg']?.model?.segmentId;
		let systemId = e.item['_cfg']?.model?.systemId;

		formData.segmentId = segmentId;
		formData.dateTime = searchForm.dateTime;
		if (systemId !== null && systemId !== undefined) {
			formData.systemId = String(systemId);
		}
		if (formData.systemId) {
			searchHandler();
		}
	});
}

function formInit() {
	console.log('forminit', formData);
	searchHandler();
}

function dialogFormChange(e) {
	console.log('dialogformChange', e);
}

function searchHandler() {
	componentConfig.pagination!.pageNum = 1;
	networkDetailConfig.pagination!.pageNum = 1;
	queryComponentDetail();
	queryNetworkDetail();
	queryNetworkMetaDataDetail();
}

// 请求组件详情接口
function queryComponentDetail() {
	componentConfig.loading = true;
	queryComponentDetailList(formData).then((res: ApiResponse) => {
		componentConfig.loading = false;
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
			return;
		}

		componentData.data = res.data.data;
		componentConfig.pagination!.total = res.data.total;
	});
}

// 请求网络详情接口
function queryNetworkDetail() {
	networkDetailConfig.loading = true;

	queryNetworkDetailList(formData).then((res: ApiResponse) => {
		networkDetailConfig.loading = false;
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
			return;
		}

		networkDetailData.data = res.data.data;
		networkDetailConfig.pagination!.total = res.data.total;
	});
}

// 跳转至基础告警查询
function jumpToBaseAlarm(row: any, alarmState: any) {
	let ipPortArr = row.componentIp.split(':');
	let data = JSON.stringify({
		systemId: formData.systemId,
		segmentIds: [Number(formData.segmentId)],
		startTime: formData.startTime,
		endTime: formData.endTime,
		alarmStates: alarmState,
		responseIp: ipPortArr[0],
		responsePort: ipPortArr[1],
	});
	router.push({
		path: '/business-monitor/monitor-query/base-alarm-list',
		query: {
			data,
		},
	});
}

// // 请求网元详情接口
function queryNetworkMetaDataDetail() {
	networkMetaDataDetailConfig.loading = true;
	// downloadStartTime.value = formData.startTime;
	// downloadEndTime.value = formData.endTime;

	queryNetworkMetaDataDetailList(formData).then((res: ApiResponse) => {
		networkMetaDataDetailConfig.loading = false;
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
			return;
		}

		networkMetaDataDetailData.data = res.data.data;
		networkMetaDataDetailConfig.pagination!.total = res.data.total;
		disable.networkMetaDataDetailExportDisable = res.data.total <= 0;
	});
}
</script>

<style rel="stylesheet/scss" lang="scss">
/* el样式隔离(不加scoped的情况下) */
.style-split-all-it-road {
	/* 加载层 */
	.el-loading-mask {
		background-color: inherit;
	}

	.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 130px;
	}
	.el-input--suffix .el-input__inner {
		padding-right: 0;
	}
	.el-input__inner {
		background-color: #152a6900;
		border: 1px solid #152a6900;
		color: #ffffff;
		font-size: 16px;
	}
	.el-icon-date {
		font-size: 16px;
		color: #ffffff;
	}

	// /* 按钮样式 */
	// .el-button {
	// 	background-color: #ffffff00;
	// 	border-color: #ffffff00;
	// 	color: #ffffff;
	// }
	// .el-button--small {
	// 	padding: 0 6px;
	// 	font-size: 16px;
	// }

	.el-form-item--small.el-form-item {
		margin-bottom: 4px;
	}

	/* 禁止文本选中 */
	user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;

	/* 搜索表单 */
	#searchFormId {
		padding: 6px 0 0 0;
	}

	/* 刷新时间下拉选 */
	.popup-refreshTime {
		position: absolute;
		background-color: #09112c80;
		z-index: 1;
		border-radius: 10px;
		border: 1px solid #5acce0;
		color: #ffffff;
		width: 100px;
		top: 30px;
		left: 36px;
		ul {
			text-align: center;
			margin: 0;
			padding: 10px 0 10px 0;
			li {
				list-style: none;
				cursor: pointer;
				&:hover {
					color: #2beded;
					background-color: rgba(43, 237, 237, 0.2);
					border-top: 1px solid #2beded;
					border-bottom: 1px solid #2beded;
				}
			}
		}
	}
}

.search-box {
	/* 按钮样式 */
	.el-button {
		background-color: #ffffff00;
		border-color: #ffffff00;
		color: #ffffff;
	}
	.el-button--small {
		padding: 0 6px;
		font-size: 16px;
	}
}

/* 监控概况卡片 */
.monitor-overview-card {
	background-image: url('@/assets/images/bpm/home/all_it_road_card.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	color: #ffffff;
	font-size: 14px;
	padding: 22px 22px 22px 15%;
	height: 130px;
}

/* 监控概况标题 */
.monitor-overview-title {
	color: #2beded;
	font-size: 16px;
}

/* 监控概况卡片-文本行 */
.monitor-overview-card .el-row {
	margin-bottom: 8px;
}

/* 监控概况-不健康-文本 */
.monitor-overview-unhealth-text {
	color: #ff9a0c;
	text-align: right;
}
/* 监控概况-总数-文本 */
.monitor-overview-total-text {
	color: #ffffff;
	text-align: right;
}
/* 监控概况-用户数 */
.monitor-overview-user-text {
	color: #ffffff;
	text-align: center;
	height: 45%;
}

/* 卡片动画 */
.card-animate-first {
	animation: bounceInRight 0.7s 1 cubic-bezier(0.215, 0.61, 0.355, 1);
}
.card-animate-second {
	animation: bounceInRight 1s 1 cubic-bezier(0.215, 0.61, 0.355, 1);
}
.card-animate-third {
	animation: bounceInRight 1.3s 1 cubic-bezier(0.215, 0.61, 0.355, 1);
}
.card-animate-fourth {
	animation: bounceInRight 1.6s 1 cubic-bezier(0.215, 0.61, 0.355, 1);
}
.card-animate-fifth {
	animation: bounceInRight 1.9s 1 cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes bounceInRight {
	0% {
		opacity: 0;
		transform: translate3d(3000px, 0, 0);
	}
	60% {
		opacity: 0.5;
		transform: translate3d(10px, 0, 0);
	}
	75% {
		transform: translate3d(-5px, 0, 0);
	}
	90% {
		transform: translate3d(1px, 0, 0);
	}
	100% {
		transform: none;
	}
}
.sticky-background {
	// background: linear-gradient(135deg, #36759c 0%, #3c5986 100%);
}
.el-button.iconActive {
	color: var(--el-color-primary);
}
</style>
